<template>
  <view class="upload-file">
    <!-- <ve-form-item :label="labelText"> -->
    <view class="placeholder" @tap="selectClick">
      {{ fileObj.url ? '重新上传' : '请选择' }}
      <ve-icon name="arrow_right_0" size="32" />
    </view>
    <!-- </ve-form-item> -->
    <view class="filename" v-if="fileObj.url">
      <view class="name">{{ fileObj.fileName }}</view>
      <view class="delete" @tap="deletefile">
        <ve-icon name="delete_2" color="#F53F3F" size="23" />
        删除
      </view>
    </view>
    <ve-popup :modelValue="modelValue" mode="bottom" @close="onClose">
      <view class="upload-btn-box">
        <view class="upload-btn-header">
          <text>请选择上传类型</text>
        </view>
        <view class="upload-btn-content">
          <view class="upload-btn upload-file" @click="onUploadFileClick">文件(PDF、word)</view>
          <view class="upload-btn upload-img" @click="onUploadImgClick">图片</view>
        </view>
      </view>
    </ve-popup>
  </view>
</template>
<script>
import { packagedUploadFile } from '@/utils/upload-tool'
/**
 * ve-modal 弹框
 * @property {Array} list 步骤条list
 */
export default {
  name: 'upload-file',
  props: {
    labelText: {
      type: String,
      default: '',
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      fileObj: {
        fileName: null,
        url: null,
        fileIdStr: null,
        progress: 0,
        error: false,
      },
    }
  },
  methods: {
    onClose() {
      this.$emit('update:modelValue', false)
    },
    selectClick() {
      this.$emit('update:modelValue', true)
    },

    onUploadFileClick() {
      let that = this
      this.$emit('update:modelValue', false)
      uni.chooseFile({
        count: 1, //默认100
        extension: ['.doc', '.docx', '.pdf'], //想要上传的文件类型
        success(res) {
          const { name } = res.tempFiles[0]
          that.fileObj = {
            fileName: name,
            url: res.tempFilePaths[0],
          }
          that.upLoadFileByUni(res)
        },
      })
    },

    onUploadImgClick() {
      let that = this
      this.$emit('update:modelValue', false)

      uni.chooseFile({
        count: 1, //默认100
        extension: ['.png', '.jpg'], //想要上传的文件类型
        success(res) {
          const { name } = res.tempFiles[0]
          that.fileObj = {
            fileName: name,
            url: res.tempFilePaths[0],
          }
          that.upLoadFileByUni(res)
        },
      })
    },
    //上传文件
    upLoadFileByUni(res) {
      this.$emit('change', this.list)
      // let that = this
      //接口
      // 创建上传对象
      const task = packagedUploadFile({
        filePath: res.tempFilePaths[0],
        success: (res) => {
          // 判断是否json字符串，将其转为json格式
          // let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
          let data = JSON.parse(res.data)
          if (data.code == 200) {
            this.fileObj = {
              fileName: result[0].fileName,
              url: result[0].openUrl,
              fileIdStr: result[0].fileIdStr,
              progress: 100,
              error: false,
            }
          } else {
            this.uploadError(data)
          }
        },
        fail: (e) => {
          this.uploadError(data)
        },
      })
    },
    deletefile() {
      this.fileObj = {
        fileName: null,
        url: null,
        fileIdStr: null,
        progress: 0,
        error: true,
      }
    },
    // 提示用户消息
    showToast(message, force = false) {
      if (this.showTips || force) {
        uni.showToast({
          title: message,
          icon: 'none',
        })
      }
    },
    // 上传失败
    uploadError(err) {
      this.fileObj = {
        fileName: null,
        url: null,
        fileIdStr: null,
        progress: 0,
        error: true,
      }
      this.showToast('上传失败，请重试')
    },
  },
}
</script>
<style lang="scss" scoped>
.upload-btn-box {
  height: 424rpx;
  padding: 32rpx 40rpx;

  .upload-btn-header {
    font-size: 36rpx;
    font-weight: 600;
    color: #191c27;
    text-align: center;
    margin-bottom: 48rpx;
  }

  .upload-btn-content {
    .upload-btn {
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      border-radius: 4rpx;
      background: #f3f7ff;
      font-size: 30rpx;
      font-weight: 400;
      color: #1d2129;
      margin-bottom: 32rpx;

      &:active {
        background: rgba(213, 227, 255, 1);
      }
    }
  }
}
.icon {
  margin-right: 18rpx;
}
.placeholder {
  text-align: right;
  color: #9ea5bb;
}
.filename {
  width: 100%;
  height: 94rpx;
  padding: 0 24rpx;
  background: #eff0f2;
  border-radius: 0rpx;
  display: flex;
  justify-content: space-between;
  .name {
    font-size: 30rpx;
    font-weight: 400;
    color: #3072f6;
    line-height: 94rpx;
  }
  .delete {
    font-size: 30rpx;
    font-weight: 400;
    color: #f53f3f;
    line-height: 94rpx;
  }
}
</style>
